﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <title>mbt</title>
    <style type="text/css">
        *
        {
            font-size: 16px;
            font-family: Helvetica New, Arial;
        }
        
        #wrapper
        {
            width: 320px;
            height: 200px;
        }
        
        .inner
        {
            position:absolute;
            white-space: nowrap;
            overflow: hidden;
            height: inherit;
            border: 1px solid #CCC;
        }
        .item
        {
            height: inherit;
            width: 150px;
            float: left;
            padding: 1px;
        }
        .thumb{height:100%;width:100%}
        
        .web
        {
            margin: 10px 0px;
        }
    </style>
        <script type="text/javascript">
        (function(n){n._mbtg={sl:"swipeleft",sr:"swiperight",su:"scrollup",sd:"scrolldown",t:"tap",dt:"dtap",pi:"pinchin",po:"pinchout",pe:"pinchend",hd:"hold",sp:"snap",ts:"touchstart",tm:"touchmove",te:"touchend"},n._mbtu={Now:function(){return+new Date},Valid:function(n){return typeof n!="undefined"},IsF:function(n){return this.Valid(n)&&n.constructor===Function},IsT:function(n,t){return typeof n===t},Dist:function(n,t,i,r){return Math.floor(Math.sqrt(Math.pow(n-i,2)+Math.pow(t-r,2)))},Listen:function(n,t,i){n.addEventListener(t,i,!0)},UnListen:function(n,t,i){n.removeEventListener(t,i,!0)}},n._mbtc={Cache:{},Id:_mbtu.Now(),Index:0,GetCache:function(n,t){var f=_mbtc.Cache,o=_mbtc.Id,e,i,r,u,s;return _mbtu.IsT(n[o],"number")||(n[o]=_mbtc.Index++),e=n[o],e in f||(_mbtc.Cache[e]={}),i=f[e],"options"in i||(i.options=new MBT.Options),r=i.options,r.Set(t),"events"in i||(i.events=new MBT.Events(n,r.Opts)),u=i.events,"monitor"in i||(i.monitor=new MBT.Monitor(n,r.Opts,u)),s=i.monitor,{GetEvents:function(){return u},GetOptions:function(){return r},Dispose:function(){u.Dispose(),s.Dispose(),delete f.events,delete f.monitor}}}},n.MBT={Events:function(n,t){var u=0,i={},r={};this.Map=r,this.Dispose=function(){for(evt in r)delete r[evt]},this.Fire=function(f){var o,s;if(_mbtu.Valid(f)&&_mbtu.IsF(r[f])){var h=Array.prototype.slice.call(arguments,1),e=!0,c=_mbtu.Now();_mbtu.Valid(i.e)&&(o=c-i.t,f===_mbtg.hd&&o<t.ht&&(e=!1),f===_mbtg.t&&i.e===_mbtg.hd&&o<t.et&&(e=!1),(f===_mbtg.pi||f===_mbtg.po)&&f===i.e&&o<t.pg&&(e=!1)),t.pg<0&&(f===_mbtg.pi?(u++,e=!1):f===_mbtg.po&&(u--,e=!1)),e&&(f===_mbtg.te&&u!==0&&(s=u>0?_mbtg.pi:_mbtg.po,r[s].apply(n,h),u=0),i.t=c,i.e=f,r[f].apply(n,h))}}},Monitor:function(n,t,i){var r,c=0,f,h,u=function(n){t.pd&&n.srcElement.tagName!=="A"&&n.preventDefault(),t.sp&&n.stopPropagation()},s=function(n){r=new MBT.Gesture(n),u(n),f=setTimeout(function(){i.Fire(_mbtg.hd,r)},t.ht),i.Fire(_mbtg.ts,r)},e=function(n){var o,s,t,e;clearTimeout(f),r.Update(n),u(n),i.Fire(_mbtg.tm,r),o=r.Count(),o===2?(s=r.Speed(),s<0?i.Fire(_mbtg.pi,r):s>0&&i.Fire(_mbtg.po,r)):o===1&&(t=r.Touch(0),e=t.Total(),(e.x!==0||e.y!==0)&&i.Fire(_mbtg.sp,t))},o=function(n){var l,v,s;if(clearTimeout(f),u(n),i.Fire(_mbtg.te,r),l=_mbtu.Now(),v=l-c,c=l,s=r.Count(),s===1){var p=r.Touch(0),o=p.Total(),e=o.x,a=o.y,y=o.time;if(y<t.tt&&v<=t.dtt){clearTimeout(h),i.Fire(_mbtg.dt,r);return}if(Math.abs(e)>=t.sd||Math.abs(a)>=t.sd){e>0?i.Fire(_mbtg.sr,r):e<0&&i.Fire(_mbtg.sl,r),a>0?i.Fire(_mbtg.sd,r):i.Fire(_mbtg.su,r);return}if(e<=t.td&&a<=t.td&&y<t.tt){h=setTimeout(function(){i.Fire(_mbtg.t,r)},t.dtt+50);return}}else s===2&&r.Scale()!==1&&i.Fire(_mbtg.pe,r)};return _mbtu.Listen(n,_mbtg.ts,s),_mbtu.Listen(n,_mbtg.tm,e),_mbtu.Listen(n,_mbtg.te,o),{Dispose:function(){_mbtu.UnListen(n,_mbtg.ts,s),_mbtu.UnListen(n,_mbtg.tm,e),_mbtu.UnListen(n,_mbtg.te,o)}}},Gesture:function(n){for(var t=n.touches,u=t.length,s=n.srcElement,i=n.scale,o,e=0,f=_mbtu.Now(),r=0;r<u;r++)this["touch"+r]=new MBT.Touch(t[r].pageX,t[r].pageY);_mbtu.Valid(n.scale)||(u===2&&(o=_mbtu.Dist(t[0].pageX,t[0].pageY,t[1].pageX,t[1].pageY)),i=1),this.Touch=function(n){return this["touch"+n]},this.Scale=function(){return i},this.Speed=function(){return e},this.Count=function(){return u},this.Source=function(){return s},this.Update=function(n){for(var t=event.touches,s,l,c,h,r=0;r<t.length;r++)r<u&&this["touch"+r].Update(t[r].pageX,t[r].pageY);s=0,t.length!==2||_mbtu.Valid(n.scale)?(s=event.scale-i,i=event.scale):(l=_mbtu.Dist(t[0].pageX,t[0].pageY,t[1].pageX,t[1].pageY),c=l/o,s=c-i,i=c),h=_mbtu.Now(),e=s/(h-f),f=h}},Touch:function(n,t){var a=n,v=t,h=_mbtu.Now(),s=n,l=t,c=h,u=0,r=0,i=0,o=0,e=0,f=0;this.Update=function(n,t){var y=_mbtu.Now();u=n-a,r=t-v,i=y-h,o=n-s,e=t-l,f=y-c,s=n,l=t,c=y},this.Total=function(){return{x:u,y:r,time:i}},this.Delta=function(){return{x:o,y:e,time:f}}},Options:function(){var n={td:0,tt:20,dtt:300,sd:200,ht:800,et:800,pg:50,pd:!1,sp:!1};this.Opts=n,this.Set=function(t){for(opt in t)n[opt]=t[opt]}},TouchHandler:function(n,t){var u=_mbtc.GetCache(n,t),f=u.GetEvents(),i,r;this.Bind=function(n,t){return _mbtu.IsT(n,"string")&&_mbtu.IsF(t)&&(f.Map[n]=t),this},i=[];for(r in _mbtg)i.push(_mbtg[r]);i.forEach(function(n){this[n]=function(t){return this.Bind(n,t)}},this),this.Dispose=function(){u.Dispose()}}},n.mbt=function(n,t){return new MBT.TouchHandler(n,t)}})(window);
        </script>
    <script type="text/javascript">
        window.$ = function (s) {
            return document.querySelectorAll(s);
        };
        
        var inner;
        var left;
        var step = 320;        
        function Adjust() {
            var inner = $('#wrapper > .inner')[0];
			var target = 0;
			if(inner.offsetLeft < -160)
			{
				target = -320;
			}
			
			//reset annimation
            if (inner.offsetLeft != target) {
				Annimate2Target(target);
            }
        }
		
		function Annimate2Target(t)
		{
			if(t !== inner.offsetLeft)
			{
				var s = (t-inner.offsetLeft) / 5;
				if(Math.abs(s) < 1)
				{
					inner.style.left = t + 'px';	
				}else
				{
					inner.style.left = inner.offsetLeft + s + 'px';	
					setTimeout(function(){ Annimate2Target(t);}, 10);
				}
			}
		}
        
        function Swipe(sign)
        {
            left += (sign*step);
            if(left > 0)
            {
                left = 0;
            }
            
            if(left <= -inner.scrollWidth)
            {
                left = -inner.scrollWidth+step;
            }
            
            inner.style.left = left + 'px';
        }

        function Snap(t) {
            var d = t.Delta();
            inner.style.left = inner.offsetLeft + d.x + 'px';
        }
		
        function Init() {
            inner = $('#wrapper > .inner')[0];
            left = inner.offsetLeft;
            var elem = $("#wrapper")[0];
            mbt(elem, { sd: 20, pd: true, sp: false, ht: 600 })
			.snap(function(t){Snap(t)})
			.swipeleft(function(){Swipe(-1)})
			.swiperight(function(){Swipe(1)});
        }
    </script>
</head>
<body onload="Init()">
    <div class="web">
        web results <a id='A1' href='http://m.bing.com'>Bing</a>
    </div>
    <div class="web">
        web results <a id='A2' href='http://m.bing.com'>Bing </a>
    </div>
    <div class="web">
        web results <a id='A3' href='http://m.bing.com'>Bing</a>
    </div>
    <div id="wrapper" class="overlay">
        <div id="inner" class="inner">
            <div class="item"><a href="http://upload.wikimedia.org/wikipedia/commons/f/f5/Charmosyna_placentis_-Jurong_Bird_Park_-pair-6a.jpg"><img src="http://ts2.mm.bing.net/th?id=iDB.4829725760750725&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://zerotips.com/wp-content/uploads/2012/02/bird.jpg"><img src="http://ts1.mm.bing.net/th?id=iDB.4734961634839328&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://celticbirdtours.com/wp-content/uploads/2012/03/bird-main.jpg"><img src="http://ts3.mm.bing.net/th?id=iDB.4770678577104282&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://picturesofanimals.in/wp-content/uploads/2012/02/Barbet-Bird.jpg"><img src="http://ts3.mm.bing.net/th?id=iDB.5028574172416430&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://ibc.lynxeds.com/files/imagecache/photo_940/pictures/micfas20296.jpg"><img src="http://ts1.mm.bing.net/th?id=iDB.4684693327905820&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://www.birding.com/images/9521_mal.jpg"><img src="http://ts2.mm.bing.net/th?id=iDB.4847524132815277&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://upload.wikimedia.org/wikipedia/commons/2/24/Yellow_bird.JPG"><img src="http://ts2.mm.bing.net/th?id=iDB.4542246440140821&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://blog.foreignpolicy.com/files/images/bird.jpg"><img src="http://ts2.mm.bing.net/th?id=iDB.4815715581821369&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://www.joe-ks.com/archives_mar2009/BirdWhiteWash.jpg"><img src="http://ts1.mm.bing.net/th?id=iDB.4675914422026868&amp;pid=15.1" class="thumb"/></a></div>
            <div class="item"><a href="http://www.easy-drawings-and-sketches.com/images/how-to-draw-a-bird06.jpg"><img src="http://ts1.mm.bing.net/th?id=iDB.4964055157768700&amp;pid=15.1" class="thumb"/></a></div>
        </div>
    </div>
    <div class="web">
        web results
    </div>
    <div class="web">
        web results
    </div>
    <div class="web">
        web results
    </div>
    <div class="web">
        web results
    </div>
</body>
</html>
